<template>
  <div class="app-container">
    <el-card>
      <el-form ref="form" :model="model" inline>
        <el-form-item label="">
          <el-input placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="省份">
          <el-select class="w-30" v-model="model.province" placeholder="请选择">
            <el-option
              v-for="province in provinceList"
              :key="province"
              :label="province"
              :value="province"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="代理品牌">
          <el-select class="w-30" v-model="model.brand" placeholder="请选择">
            <!-- <el-option v-for="province in provinceList" :key="province" :label="province" :value="province" /> -->
          </el-select>
        </el-form-item>
        <el-form-item label="接单员">
          <el-select
            class="w-30"
            v-model="model.orderTaker"
            placeholder="请选择"
          >
            <el-option
              v-for="item in orderDataStore.orderTakerInfo"
              :key="item.orderTaker"
              :label="item.orderTaker"
              :value="item.orderTaker"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="业务员">
          <el-select
            class="w-30"
            v-model="model.businessman"
            placeholder="请选择"
          >
            <el-option
              v-for="item in orderDataStore.businessmanInfo"
              :key="item.businessman"
              :label="item.businessman"
              :value="item.businessman"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search">搜索</el-button>
          <el-button :icon="Refresh">重置</el-button>
        </el-form-item>
        <el-form-item class="float-right">
          <el-button type="primary" :icon="Plus" @click="handleAdd"
            >添加客户</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="dataList" class="w-full">
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column label="客户名称" prop="name"> </el-table-column>
        <el-table-column label="客户编码" prop="code"> </el-table-column>
        <el-table-column label="注册手机" prop="phone"> </el-table-column>
        <el-table-column label="代理品牌" prop="brand"> </el-table-column>
        <el-table-column label="省份" prop="province"> </el-table-column>
        <el-table-column label="城市" prop="city"> </el-table-column>
        <el-table-column label="是否启动" prop="city">
          <template v-slot="{ row }">
            <el-switch v-model="row.active"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="客户预警" prop="city" width="80">
          <template v-slot="{ row }">
            <el-switch v-model="row.alarm"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          prop="operation"
          width="230"
          align="center"
        >
          <template v-slot="{ $index }">
            <el-button type="primary" link @click="handleEdit('info', $index)"
              >基本信息</el-button
            >
            <el-button type="primary" link @click="handleEdit('addr', $index)"
              >地址</el-button
            >
            <el-button type="primary" link @click="handleEdit('log', $index)"
              >日志</el-button
            >
            <el-button type="primary" link>微信</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <AddressModal
      :openModal="openAddrModal"
      :id="currentIndex"
      @close="openAddrModal = false"
    />
    <InfoModal
      :openModal="openInfoModal"
      :data="dataList[currentIndex]"
      :update="update"
      @close="openInfoModal = false"
      @reload="reloadInfo"
    />
    <LogModal :openModal="openLogModal" @close="openLogModal = false" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { provinceList } from "../../../../utils/city";
import { Plus, Refresh, Search } from "@element-plus/icons-vue";
import AddressModal from "./components/AddressModal.vue";
import InfoModal from "./components/InfoModal.vue";
import LogModal from "./components/LogModal.vue";
import useOrderDataStore from "@/store/modules/orderData";
const orderDataStore = useOrderDataStore();
const model = ref({
  brand: "",
  province: "",
  orderTaker: "",
  businessman: "",
});
const dataList = ref(orderDataStore.customerInfo);
const openAddrModal = ref(false);
const openInfoModal = ref(false);
const openLogModal = ref(false);
const currentIndex = ref(0);
const update = ref(false);

const feature = ref();

function handleEdit(type, $index) {
  currentIndex.value = $index;
  update.value = true;
  switch (type) {
    case "info":
      openInfoModal.value = true;
      break;
    case "addr":
      openAddrModal.value = true;
      break;
    case "log":
      openLogModal.value = true;
      break;
  }
}
function reloadInfo(form, update) {
  if (update) {
    if (form.address) {
      let [province, city, area] = form.address.split(",");
      form.province = province;
      form.city = city;
      form.area = area;
    }
    dataList.value[currentIndex.value] = form;
  } else {
    dataList.value.push(form);
  }
  // console.log(dataList.value[currentIndex.value]);
}
function handleAdd() {
  update.value = false;
  openInfoModal.value = true;
}
</script>
